<!-- mineConstruStatistice -->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <!--<Col span="8">-->
                    <!--<FormItem label="填表时间：" prop="content" >-->
                        <!--<DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"-->
                                    <!--@on-change="onSelectQueryDateRange"	></DatePicker>-->
                    <!--</FormItem>-->
                <!--</Col>-->
                <Col span="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="安全生产许可证编号：" prop="saLicenceNum">
                        <Input v-model='dataToQuery.saLicenceNum' class="query-form-el"></Input>
                    </FormItem>
                </Col>
                <Col span="8"></Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="绿色矿山建设情况统计表" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=900 :styles="{height:'1139px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='矿山名称：' prop='mineName'>
                                    <div v-if="mode === 'view'">{{dataToView.mineName}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.mineName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='省市级入围时间：' prop='provincialLandingTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.provincialLandingTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.provincialLandingTime'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='国家级入围时间：' prop='nationalLandingTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.nationalLandingTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.nationalLandingTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='符合性判断：' prop='conformanceJudg'>
                                    <div v-if="mode === 'view'">{{dataToView.conformanceJudg}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.conformanceJudg'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='网上申请时间：' prop='onlineAppTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.onlineAppTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.onlineAppTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='自评报告完成时间：' prop='selfReportCompleTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.selfReportCompleTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.selfReportCompleTime'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='三方评估时间：' prop='tripartiteAssessmentTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.tripartiteAssessmentTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.tripartiteAssessmentTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='材料审核：' prop='materialReview'>
                                    <div v-if="mode === 'view'">{{dataToView.materialReview}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.materialReview'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='公示时间：' prop='publicTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.publicTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.publicTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='实地核查：' prop='onSiteInsp'>
                                    <div v-if="mode === 'view'">{{dataToView.onSiteInsp}}</div>
                                    <Input v-else class='query-form-el' type='text' v-model='dataToView.onSiteInsp'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='属地是否实地抽查：' prop='depSpotCheck'>
                                    <div v-if="mode === 'view'">{{dataToView.depSpotCheck=='0'?'是':dataToView.depSpotCheck=='1'?'否':''}}</div>
                                    <Select v-else v-model='dataToView.depSpotCheck' class='query-form-el'>
                                        <Option value="1">否</Option>
                                        <Option value="0">是</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='属地实地抽查时间：' prop='depSpotTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.depSpotTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.depSpotTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='属地实地抽查结果：' prop='depSpotResult'>
                                    <div v-if="mode === 'view'">{{dataToView.depSpotResult}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.depSpotResult'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='自然资源部是否复核：' prop='natResourReview'>
                                    <div v-if="mode === 'view'">{{dataToView.natResourReview=='0'?'是':dataToView.natResourReview=='0'?'否':''}}</div>
                                    <Select v-else v-model='dataToView.natResourReview' class='query-form-el'>
                                        <Option value="1">否</Option>
                                        <Option value="0">是</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='自然资源部复核时间：' prop='natResourReviewTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.natResourReviewTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.natResourReviewTime'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='自然资源部复核方式：' prop='natResourReviewMode'>
                                    <div v-if="mode === 'view'">{{dataToView.natResourReviewMode}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.natResourReviewMode '></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='自然资源部复核结果：' prop='natResourReviewResult'>
                                    <div v-if="mode === 'view'">{{dataToView.natResourReviewResult}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.natResourReviewResult'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='全国绿色矿山名录未公示原因：' prop='minePublicaeReasons'>
                                    <div v-if="mode === 'view'">{{dataToView.minePublicaeReasons}}</div>
                                    <Input v-else class='query-form-el' type='textarea' v-model='dataToView.minePublicaeReasons'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='全国绿色矿山名录公示时间：' prop='minePublicaeTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.minePublicaeTime)}}</div>
                                    <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.minePublicaeTime'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表人手机号：' prop='registrantPhone'>
                                    <div v-if="mode === 'view'">{{dataToView.registrantPhone}}</div>
                                    <Input v-else type='text' v-model='dataToView.registrantPhone'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components:{
            cascaderDom
        },
        data(){
            return{
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100 },
                    { key:'mineName',title: '矿山名称',  align: 'center', width: 200 },
                    { key:'provincialLandingTime',title: '省市级入围时间',  align: 'center', width: 150, render: this.renderCellDate },
                    { key:'nationalLandingTime',title: '国家级入围时间',  align: 'center', width: 150, render: this.renderCellDate },
                    { key:'conformanceJudg',title: '符合性判断',  align: 'center', width: 150  },
                    { key:'onlineAppTime',title: '网上申请时间',  align: 'center', width: 150, render:  this.renderCellDate},
                    { key:'mineConstruStatistice',title: '自评报告完成时间',  align: 'center', width: 150, render:  this.renderCellDate},
                    { key:'tripartiteAssessmentTime',title: '三方评估时间',  align: 'center', width: 150, render:  this.renderCellDate},
                    { key:'materialReview',title: '材料审核',  align: 'center', width: 150, },
                    { key:'onSiteInsp',title: '实地核查',  align: 'center', width: 150,  },
                    { key:'publicTime',title: '公示时间',  align: 'center', width: 150, render:  this.renderCellDate},
                    { key:'depSpotCheck',title: '属地是否实地抽查',  align: 'center', width: 100, render: (h, params) => {
                            return h('span', params.row.depSpotCheck == '0' ? '是' : params.row.depSpotCheck == '1' ?'否':'')} },
                    { key:'depSpotTime',title: '属地实地抽查时间',  align: 'center', width: 150, render:  this.renderCellDate},

                    { key:'createDate',title: '填表时间',  align: 'left', width: 120,  render: this.renderCellDate },
                    this.getActionColumns(),
                ],
                ruleCustom : {
                    // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
                    mineName: [ { required: true, message: '请填写矿山名称', trigger: 'change' } ],
                    // provincialLandingTime: [ { required: true, message: '请填写省市级入围时间', trigger: 'change' } ],
                    // conformanceJudg: [ { required: true, message: '请填写符合性判断', trigger: 'change' } ],
                    // mineLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
                    // mineLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
                    // saLicenceNum: [ { required: true, message: '请填写安全生产许可证编号', trigger: 'change' } ],
                    // saLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
                    // saLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
                    // startDate: [ { required: true, message: '请填写投产日期', trigger: 'change' } ],
                    // mineDesignOrg: [ { required: true, message: '请填写矿山开采设计单位', trigger: 'change' } ],
                    // saStandiadRank: [ { required: true, message: '请填写矿山安全标准化等级）', trigger: 'change' } ],
                    // saStandiadRankDate: [ { required: true, message: '请填写矿山安全标准化期限', trigger: 'change' } ],
                    // mineArea: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/,message: '矿区面积（平方公里））必须为数字', trigger: 'change',type:'number'}],
                },
                tableHeight:10,
                // api
                queryUrl:Api.queryMineConstru,
                exportUrl:Api.exportMineConstru,
                deleteUrl:Api.deleteMineConstru,
                updateUrl:Api.updateMineConstru,
                saveUrl:Api.saveMineConstru,
                //coding
                mineBlastList : [],
                mineTeamTypeList: [],
            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            createEmptyDataToAdd() {
                return {
                    createUserName:this.currentUser.userName,
                    createDate:new Date()
                }
            },
            beforeEditDialogOpen(data) {
                // data.row.companyAddressArr = data.row.companyAddress.split(',')
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.queryAjax();
            },
            submit(name) {
                this.submitAjax(name);
            },

        },
        watch:{
        },
    }
</script>

<style lang='css' scoped>
    .rpt-form{}
    /deep/ .rpt-form .query-form-el{width:100%;}
    /deep/ .rpt-form .ivu-table-wrapper{overflow: visible;}
    /deep/ .rpt-form .ivu-table-wrapper .ivu-table{overflow: visible;}
</style>
